<template>
  <div class="xiangqing_header_box">
    <div class="banner_img" @click="headImgclick">
      <i class="banner_top">
        <img
          class="banner_top_img"
          :src="bannerImg"
          alt
        />
      </i>

      <div class="banner_bottom">
        <span class="banner_bottom_left">{{this.sightNames}}</span>
        <span class="banner_bottom_right">
          <i class="icon_number iconfont">&#xe6f0;</i>
          
          {{this.gallaryImgs.length}}
        </span>
      </div>
    </div>
    <!-- 这是公组件，这里是传递图片到公共组件里面  -->
    <!-- 但是这个组件是开始隐藏的所以这个先用v-show -->
    <!-- @menban是公共组件gallary组件$emit传过来的， 他后面可以随意命名一个点击函数事件。-->
    <!-- :imgs="imgs" 被:imgs="gallaryImgs"取代-->
    <!-- 你那个需要引入到插槽里，就写在哪个标签外面 -->
    <Common-Fede>
    <Common-Gallary :imgs="gallaryImgs"
                    v-show="imgsShow"
                    @menban="menclick">888
   </Common-Gallary>
   </Common-Fede>
    <!-- <gallary></gallary> -->
  </div>
</template>

<script>
// 公共组件
// import gallary from '../../../common/gallary/gallary'
// 上面的引入也行，但是在webpack中路径做了优化，所以不用
import CommonGallary from 'common/gallary/gallary'
// 引入公共组件，然后公共组件有个插槽，就是让这个组件在公共组件插槽里
import CommonFede from 'common/fede/fedeanimation'

export default {
   components:{
        CommonGallary,
        // gallary
        CommonFede
    },
    // 接收
  props:{
    bannerImg:String,
    gallaryImgs:Array,
    sightNames:String

  },
  // 在data里面吧公共组件的imgs的数据给定义下
  data(){
    return{
      // ims被上面的gallaryImgs的axios数据所取代。
      /*imgs:["http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg","http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg"],*/
      imgsShow:false
    }
  },
   
    methods:{
      headImgclick(){
        this.imgsShow=true;
      },
      menclick(){
          this.imgsShow=false;
      }
    }
};
</script>

<style lang="stylus" scoped>
.banner_img {
  position: relative;

  .banner_top {
    width: 100%;
    height: 3.5rem;
    display: block;

    .banner_top_img {
      width: 100%;
      height: 100%;
    }
  }

  .banner_bottom {
    width: 100%;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;

    .banner_bottom_left {
      color: red;
      font-size: 0.35rem;
      padding-left: 0.35rem;
    }

    .banner_bottom_right {
      padding: 0.1rem 0.2rem;
      background: green;
      margin: 0 0.35rem 0.2rem 0;
      display: block;
      color: #fff;

      .icon_number {
      }
    }
  }
}
</style>